<template>
    <div class="vtable-container">
        <el-card>
            <div style="height: 400px">
                <el-auto-resizer>
                    <template #default="{ height, width }">
                        <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" fixed />
                    </template>
                    <template #empty>
                        <div class="flex items-center justify-center h-100%">
                            <el-empty />
                        </div>
                    </template>
                </el-auto-resizer>
            </div>
        </el-card>
    </div>
</template>

<script lang="tsx" setup>
const generateColumns = (columnsName = [], prefix = 'column-', props?: any) =>
    Array.from(columnsName).map((_, columnIndex) => ({
        ...props,
        key: `${prefix}${columnIndex}`,
        dataKey: `${prefix}${columnIndex}`,
        //@ts-ignore
        title: `${columnsName[columnIndex].name}`,
        width: 150,
    }))

const generateData = (
    columns: ReturnType<typeof generateColumns>,
    length = 200,
    prefix = 'row-'
) =>
    Array.from({ length }).map((_, rowIndex) => {
        return columns.reduce(
            (rowData, column, columnIndex) => {
                rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
                return rowData
            },
            {
                id: `${prefix}${rowIndex}`,
                parentId: null,
            }
        )
    })
const columnsName: any = [{ name: "名称" }, { name: "地址" }, { name: "性别" }];
const columns = generateColumns(columnsName)  //10列
console.log(columns);
const data: any = generateData(columns, 1000) || []; //1000个数据;


</script>
<style scoped>
.vtable-container {
    padding: 10px;
}
</style>